<!--
 * @Author: 千锋爱佛僧
 * @公众号: 大前端私房菜
 * @Slogan: 千锋精品教程，好学得不像实力派！
-->
<!--
 * @Author: 千锋爱佛僧
 * @公众号: 大前端私房菜
 * @Slogan: 千锋精品教程，好学得不像实力派！
-->
<template>
  <div>
    <h1>Typescript与组合式API的配合使用</h1>
    <p>{{ name }}---{{ score }}</p>
    <van-button type="primary" @click="handleChild">修改score分数</van-button>
    <h1>{{ str }}</h1>
    <h2>{{ reMsg }}</h2>
    <h2>{{ reMsg }}</h2>
    <h2>{{ reMsg }}</h2>
    <h2>{{ reMsg }}</h2>
    <input type="text" @focus="handleFocus" />
    <h1 ref="myH1" @click="handleBorder">演示ref操作DOM</h1>
    <input type="text" ref="myInput" />
    <h1>演示provide/inject{{ msg }}</h1>
  </div>
</template>

<script setup lang="ts">
import { reactive, ref, computed, inject } from "vue";
//props约束
interface Stu {
  name: string;
  score: number;
}

defineProps<Stu>(); //接收props

//emit的约束
interface EmitsType {
  //约束emits自定义事件的格式
  (e: "change-score", arg: number): void;
}
const emits = defineEmits<EmitsType>(); //此处的emits相当于之前this.$emit
const handleChild = () => {
  emits("change-score", 80);
};

// reactive数据类型约束
interface Food {
  name: string;
  suger: string;
  water?: string;
}
const food: Food = reactive({
  name: "凉虾",
  suger: "红糖",
});
food.water = "冰水";

// computed 计算属性
const str = ref<string>("Hello");
const reMsg = computed<string>(() => {
  return str.value.split("").reverse().join("");
});

// 为事件对象设定类型
const handleFocus = (ev: Event) => {
  console.log(ev);
  (ev.target as HTMLInputElement).value = "123";
};

// ref获取DOM元素模板
const myH1 = ref<HTMLHeadElement | null>(null);
const myInput = ref<HTMLInputElement | null>(null);
const handleBorder = () => {
  if (myH1.value) {
    myH1.value.style.border = "3px solid red";
  }
  if (myInput.value) {
    myInput.value.focus();
  }
};

//注入inject
const msg = inject<string>("msg");
</script>

<style scoped></style>
